<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态生成表格</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            border-collapse: collapse;
        }

        div {
            margin: 10px auto;
            width: 700px;
            /* height: 700px; */
        }

        /* input{
            margin-bottom: 10px;
        } */
        thead th {
            width: 100px;
            height: 35px;
            line-height: 35px;
            text-align: center;
        }

        tbody {
            text-align: center;
        }
    </style>
</head>

<body>
    <!-- 表格中的数据是从某个渠道得到的一个对象数组
    根据该对象数组生成表格 -->
    <div>
        <!-- <input type="text" value="增加" id="txtadd"> -->
        <form action="">
            <table border="1">
                <thead>
                    <th>姓名</th>
                    <th>科目</th>
                    <th>成绩</th>
                    <th>操作</th>
                </thead>
                <tbody id="tb"></tbody>
            </table>
        </form>
    </div>

    <script>
        var datas = [
            {
                name: 'a',
                subject: 'JavaScript',
                score: '100',
            },
            {
                name: 'b',
                subject: 'JavaScript',
                score: '90',
            },
            {
                name: 'c',
                subject: 'JavaScript',
                score: '80',
            }
        ];
        var tb = document.querySelector('#tb')
        var arr = [];
        for (var i = 0; i < datas.length; i++) {
            var person = datas[i];
            var html = '<tr>';
            // var html = document.createAttribute('td')
            for (var key in person) {
                html += '<td>' + person[key] + '</td>';
            }
            //添加删除超链接
            html += "<td><a href='JavaScript.void(0);'onclick='del()'>删除</a></td>";
            arr.push(html);
        }
        tb.innerHTML = arr.join('');
        // function del(a){
        //     var tr=
        // }
    </script>
</body>

</html>